import React from 'react';
import { Icon, Tooltip } from 'antd';
import styles from './index.less';
import { recruitStatusInfo } from '../../utils';

export default function HireCard({
    title,
    children,
    recruitStatus,
    successFootInfo,
    failInfo,
    showFoot = true,
    linkParams = {},
    employStatusHover
}) {
    const [isExpanded, setIsExpanded] = React.useState(true);
    const targetFootInfo =
        failInfo || successFootInfo || recruitStatusInfo.find(item => item.value === recruitStatus) || {};
    const { text, background, color, link = () => {} } = targetFootInfo;

    const showStatusText = (
        <div className={styles.footer} style={{ background }}>
            <span className={styles.recruitStatus} style={{ color }}>
                {text}
            </span>
            {link(linkParams)}
        </div>
    );
    return (
        <div className={styles.wrapper}>
            <div className={styles.titleWrap}>
                <span className={styles.title}>{title}</span>
                <span
                    className={styles.unfold}
                    onClick={() => {
                        setIsExpanded(!isExpanded);
                    }}
                >
                    {isExpanded ? (
                        <>
                            收起 <Icon type="caret-up" />{' '}
                        </>
                    ) : (
                        <>
                            展开 <Icon type="caret-down" />{' '}
                        </>
                    )}
                </span>
            </div>
            {isExpanded && (
                <>
                    {children}
                    {showFoot &&
                        recruitStatus &&
                        (recruitStatus === 4 && employStatusHover ? ( // 状态是审批拒绝时要把拒绝人和拒绝的原因hover出来
                            <Tooltip title={employStatusHover} placement="topLeft">
                                {showStatusText}
                            </Tooltip>
                        ) : (
                            showStatusText
                        ))}
                </>
            )}
        </div>
    );
}
